<template>
  <div id="app">
      <div class="block">
            <span class="demonstration">默认 click 触发子菜单</span>
            <el-cascader
                v-model="value"
                :options="options"
                @change="handleChange">
            </el-cascader>
        </div>
        <div class="block">
            <span class="demonstration">hover 触发子菜单</span>
            <el-cascader
                v-model="value"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange">
            </el-cascader>
        </div>
    </div>
</template>

<script>
export default {
    name:'App',
    data(){
        return {
            value:[],
            options:[
                {
                    value:'zhinan',
                    label:'指南',
                    children:[
                        {
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children:[
                                {
                                    value: 'yizhi',
                                    label: '一致'
                                },{
                                    value: 'fankui',
                                    label: '反馈'
                                }
                            ]
                        },
                        {
                            value: 'daohang',
                            label: '导航',
                            children: [
                                {
                                    value: 'top',
                                    label: '顶部导航'
                                },{
                                    value: 'right',
                                    label: '侧向导航'
                                }
                            ]
                        },

                    ]
                },

                
            ],
            
        }
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
}
</script>

<style>

</style>